<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>九九乘法表</title>

<style>

  body {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    background-color: #f0f0f0;

  }

  .table {

    border-collapse: collapse;

    width: auto;

    margin: auto;

  }

  .table td {

    border: 1px solid #3aafea;

    padding: 8px 12px;

    text-align: center;

    cursor: pointer;

    background-color: #ffffff;

  }

  .table td:hover {

    background-color: #e91414;

  }

</style>

</head>

<body>

<table class="table">

  <tbody>

  </tbody>

</table>

<script>

  function generateTable() {

    const table = document.querySelector('.table tbody');

    for (let i = 1; i <= 9; i++) {

      const tr = document.createElement('tr');

      for (let j = 1; j <= i; j++) {

        const td = document.createElement('td');

        td.textContent = `${i}x${j}=${i * j}`;

        tr.appendChild(td);

      }

      table.appendChild(tr);

    }

  }

  generateTable();

</script>

</body>

</html>